<template>
  <view class="main-view">
    <public-header :title="title" :isBack="isBack"></public-header>
    <view class="main-view-box" v-if="type==='overview'">
      <u-tabs :activeStyle="{
            color: '#38C09E',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" lineColor="#38C09E" activeColor="#38C09E" :list="tabs" :current="currentTab" @change="changeTab"
        class="u-tabs"></u-tabs>
      <view v-for="(item,index) in tabs">
        <report-table class="report-overview has-header" :serviceName="item.serviceName" v-show="currentTab===index"
          v-if="isLoad[item.serviceName]">
        </report-table>
      </view>
    </view>
    <view class="main-view-box" v-else-if="serviceName">
      <u-tabs :activeStyle="{
            color: '#38C09E',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" lineColor="#38C09E" activeColor="#38C09E" :list="tabs" :current="currentTab" @change="changeTab"
        class="u-tabs"></u-tabs>
      <report-table class="report-overview " :serviceName="serviceName" :initCond="condition" @change-service="changeService"></report-table>
    </view>
  </view>
</template>

<script>
  import lockscreen from '@/common/mixins/lockscreen.js'
  export default {
    mixins: [lockscreen],
    data() {
      return {
        isLoad: {},
        title: "",
        isBack: true,
        type: "",
        serviceName: "",
        condition:[],
        currentTab: 0,
        tabs: [{
            name: "营业概览",
            serviceName: "srvretail_business_overview_select"
          },
          {
            name: "营收报表",
            serviceName: "srvretail_revenue_report_select"
          },
          {
            name: "流水明细",
            serviceName: "srvretail_flow_details_select"
          },
          {
            name: "销售明细",
            serviceName: "srvretail_sale_details_select"
          },
          {
            name: "退款明细",
            serviceName: "srvretail_refund_order_info_select"
          },
          {
            name: "交易对账",
            serviceName: "srvretail_refund_Transaction_reconciliation_select"
          },
          {
            name: "商品报表",
            serviceName: "srvretail_product_reaport_info_select"
          }
        ]
      }
    },
    methods: {
      changeService(e) {
        this.serviceName = e
      },
      changeTab(e) {
        this.currentTab = e.index
        this.isLoad[this.tabs[e.index]['serviceName']] = true
      }
    },
    onLoad(option) {
      if (option.title) {
        this.title = option.title
      }
      if (option.isBack) {
        this.isBack = true
      }
      if (option.type) {
        console.log(option.type);
        this.type = option.type
      }
  
      if (option.serviceName) {
        this.serviceName = option.serviceName
        this.isLoad[option.serviceName] = true
        if(option.subtitle){
          this.tabs = [{
            name: option.subtitle,
            serviceName: option.serviceName
          }]
        }
        if(option.cond){
          try{
            this.condition = JSON.parse(option.cond)
          }catch(e){
            //TODO handle the exception
          }
        }
        // if(option.hideTabs){
        //   this.tabs = []
        // }
        if (this.tabs.findIndex(item => item.serviceName === this.serviceName) > -1) {
          this.currentTab = this.tabs.findIndex(item => item.serviceName === this.serviceName)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
 @import './report-public.scss';
</style>
